<script src="assets/plugins/masonry/js/masonry-docs.min.js" type="text/javascript"></script>

<select class="form-control" ng-model="selectedGroup" ng-options="group.name for group in groups">
    <option value="">全部用户</option>
</select>

<div class="select">
    <ul class="nav nav-tabs nav-justified">
        <li role="presentation" class="active presentation">
            <a ng-click="changeTab('word')" data-toggle="tab" aria-expanded="true">
                <span class="glyphicon glyphicon-pencil" style=" position: relative;top:3px;"></span>
                <strong>
                    文字
                </strong></a></li>
        <li role="presentation" class="presentation">
            <a ng-click="changeTab('news')" data-toggle="tab" aria-expanded="true">
                <span class="glyphicon glyphicon-picture" style=" position: relative;top:3px;"></span>
                <strong>
                    图文信息
                </strong></a>
        </li>
    </ul>
</div>
<div class="editDiv">
    <div class="wordTab tab" ng-show="currentTab=='word'">
        <textarea ng-model="wordInfo"></textarea>
    </div>
    <div class="newsTab tab" ng-show="currentTab=='news'">
        <div ng-if="currentMaterial" style="position: relative">
            <div class="material" style="border: 1px solid #C9C9CC;width:295px;cursor: pointer;position: relative">
                <div ng-if="currentMaterial.newList.length==1">
                    <div style="padding: 5px 14px">
                        <div style="line-height: 28px;font-size: 16px;">{{currentMaterial.newList[0].title}}</div>
                        <div style="font-weight: 400;color: #666;">{{currentMaterial.newList[0].createdTime|time:'MM-dd hh:mm'}}</div>
                        <div background-image="{{currentMaterial.newList[0].coverImg}}" style=" height: 160px;width: 100%;background-size:cover;overflow: hidden;background-repeat: no-repeat;background-position:center center;"></div>
                        <div style="font-weight: 400;color: #666; padding: 5px 0 10px;">{{currentMaterial.newList[0].digest}}</div>
                    </div>
                </div>
                <div ng-if="currentMaterial.newList.length!=1" ng-repeat="new in currentMaterial.newList" style="width:295px;">
                    <div ng-if="$index==0" style="padding: 5px 14px 10px 14px;">
                        <div style="font-weight: 400;color: #666;">{{new.createdTime|time:'MM-dd hh:mm'}}</div>
                        <div background-image="{{new.coverImg}}" style="height: 160px;width: 100%;background-size:cover;overflow: hidden;background-repeat: no-repeat;background-position:center center;position: relative">
                            <div style="position: absolute;bottom: 0px;height: 30px;width:100%;background-color:rgba(39, 39, 38, 0.71);
                line-height: 30px;padding-left: 10px;padding-right: 5px;overflow: hidden;text-overflow: ellipsis;color: #ffffff;text-align: left">
                                <span>{{new.title}}</span>
                            </div>
                        </div>
                    </div>
                    <div ng-if="$index!=0" style="height: 120px;border-top: 1px solid #C9C9CC">
                        <div style="float: left;height: 78px;width: 180px;margin: 20px 10px 0px 13px;line-height: 39px;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;">
                            <span>{{new.title}}</span>
                        </div>

                        <div style="float: left;height: 78px;width: 78px;margin-top: 20px;line-height: 78px;text-align: center;background-color: buttonface">
                            <img ng-src="{{new.coverImg}}" width="100%" height="100%">
                        </div>
                    </div>
                </div>
            </div>
            <div style="position: absolute;left: 300px;bottom: 0px;cursor: pointer;color: #03A9F4" ng-click="deleteCurrentMaterial()">删除</div>
        </div>
        <div ng-if="!currentMaterial">
            <div style="width: 35%;height: 200px;border: 1px dotted black;float: left;margin-left: 10%;margin-top: 25px">
                <div style="text-align: center;line-height: 200px;cursor: pointer" ng-click="showSelectMaterialModal()">
                    从素材库中选择
                </div>
            </div>
            <div style="width: 35%;height: 200px;border: 1px dotted black;float: left;margin-left: 10%;margin-top: 25px">
                <div style="text-align: center;line-height: 200px;cursor: pointer">
                    新建消息图文
                </div>
            </div>
        </div>

    </div>
</div>

<div style="text-align: right">
    <button class="btn btn-primary" ng-click="send()">发送</button>
</div>


<div class="modal fade" id="selectMaterialModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 650px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">选择素材</h4>
            </div>
            <div class="modal-body" >
                <div id="materialContainer">
                    <div class="material" ng-repeat="material in materials" after-repeat-dom-create="afterMaterialInsert()"  ng-click="selectMaterial(material)"
                         style="border: 1px solid #C9C9CC;width:295px;margin-bottom: 20px;float: left;cursor: pointer;position: relative">
                        <div ng-if="material.newList.length==1">
                            <div style="padding: 5px 14px">
                                <div style="line-height: 28px;font-size: 16px;">{{material.newList[0].title}}</div>
                                <div style="font-weight: 400;color: #666;">{{material.newList[0].createdTime|time:'MM-dd hh:mm'}}</div>
                                <div background-image="{{material.newList[0].coverImg}}" style=" height: 160px;width: 100%;background-size:cover;overflow: hidden;background-repeat: no-repeat;background-position:center center;"></div>
                                <div style="font-weight: 400;color: #666; padding: 5px 0 10px;">{{material.newList[0].digest}}</div>
                            </div>
                        </div>
                        <div ng-if="material.newList.length!=1" ng-repeat="new in material.newList" style="width:295px;">
                            <div ng-if="$index==0" style="padding: 5px 14px 10px 14px;">
                                <div style="font-weight: 400;color: #666;">{{new.createdTime|time:'MM-dd hh:mm'}}</div>
                                <div background-image="{{new.coverImg}}" style="height: 160px;width: 100%;background-size:cover;overflow: hidden;background-repeat: no-repeat;background-position:center center;position: relative">
                                    <div style="position: absolute;bottom: 0px;height: 30px;width:100%;background-color:rgba(39, 39, 38, 0.71);
                line-height: 30px;padding-left: 10px;padding-right: 5px;overflow: hidden;text-overflow: ellipsis;color: #ffffff;text-align: left">
                                        <span>{{new.title}}</span>
                                    </div>
                                </div>
                            </div>
                            <div ng-if="$index!=0" style="height: 120px;border-top: 1px solid #C9C9CC">
                                <div style="float: left;height: 78px;width: 180px;margin: 20px 10px 0px 13px;line-height: 39px;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;">
                                    <span>{{new.title}}</span>
                                </div>

                                <div style="float: left;height: 78px;width: 78px;margin-top: 20px;line-height: 78px;text-align: center;background-color: buttonface">
                                    <img ng-src="{{new.coverImg}}" width="100%" height="100%">
                                </div>
                            </div>
                        </div>


                        <div class="mask" style="position: absolute;top: 0px ;left: 0px;right: 0px ;bottom: 0px;background-color: rgba(0,0,0,0.6)" hidden="hidden" ng-class="{true:'active'}[currentMaterial.id==material.id]">
                            <div style="position: absolute;height: 55px;top: 50%;margin-top: -27px;text-align: center;width: 100%">
                                <span class="fa fa-check" style="color: white;font-size: 55px;"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>


<style>
    .presentation {
        cursor: pointer;
    }

    .select {
        margin: 20px 0px 0px 0px;
    }

    .editDiv, .select {
        width: 100%;
    }

    .editDiv {
        min-height: 300px;
        border-left: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
        margin-bottom: 20px;
        padding: 20px;
    }

    .tab {
        height: 100%;
        /*width: 100%;*/
    }

    textarea {
        width: 100%;
        resize: none;
        height: 260px;
    }

    #materialContainer .active{
        display: block !important;
    }

</style>